<style>
    .split {
        position: relative;
        width: 100%;
    }

    .split.split-horizontal, .gutter-horizontal {
        height: 100%;
    }

    .gutter {
        background: #666;
    }

    .gutter-horizontal {
        cursor: ew-resize;
        background-image: url("images/splitter.png");
        background-position: center;
        background-repeat: no-repeat;
    }

    #main {
        border-top: 1px solid #efe3e5;
        margin-bottom: 0;
    }

    .menus li {
        padding: 12px 20px;
        cursor: pointer;
        background: #fff;
        border-bottom: 1px solid #efe3e5;
        border-left: 5px solid transparent;
    }

    .menus li.active {
        transition: all 500ms;
        border-left: 5px solid #09f;
    }

    .menus li:hover {
        transition: all .5s;
        background: #efefef;
    }

    .block-badge {
        position: absolute;
        bottom: 6px;
        right: 6px;
    }
</style>
<div ng-controller="contrast">
    <div style="height: calc(100vh - 45px);display: flex">
        <div style="width: 100vw;display: flex">
            <div class="split split-horizontal" id="select" style="background: #fff">
                <ul class="menus">
                    <li ng-class="active.id==p.id?'active':''" ng-click="choicePage(p)" ng-repeat="p in pages">
                        {{p.name}}
                    </li>
                </ul>
            </div>
            <div class="split split-horizontal" id="code">
                <div class="block-badge">
                    <div class="badge badge-warning" style="font-family: initial">Java代码</div>
                </div>
                <pre id="erupt-code" style="margin: 0;height: 100%;border-radius: 0"><code
                        class="prism language-java"></code></pre>
            </div>
            <div class="split split-horizontal" id="view">
                <div class="block-badge">
                    <div class="badge badge-danger" style="font-family: initial">运行效果</div>
                </div>
                <iframe ng-src="{{'https://www.erupt.xyz/demo/#' + active.path | trustAsResourceUrl}}"
                        style="width: 100%;height: calc(100vh - 46px);border:0"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    localStorage.removeItem('split-sizes')
    // console.log(sizes);
    // if (sizes) {
    //     sizes = JSON.parse(sizes)
    // } else {
    //     sizes = [15, 25, 60] // default sizes
    // }
    Split(['#select', '#code', '#view'], {
        sizes: [15, 25, 60],
        minSize: [120, 200, 360],
        expandToMin: true,
        gutterSize: 5,
    })
</script>
